import React, { PureComponent } from 'react';
import { getCinemaInfo, getCinemaFilmsArrangement } from './api'
import {Link,Route,Redirect} from 'react-router-dom'
import Swiper from './components/swiper'
import Film from './components/Film'
import { CinemaDetail } from './styled'
import {getWeekZh} from'../../utils/dateFormat'
class Cinema extends PureComponent {
  state = {
    cinemadata: [],
    filmdata: null,
    activeFilm: null,
    date:['今日','明日','后天']
  }
  componentDidMount() {
    let id = this.props.match.params.id;
    getCinemaInfo({ cinemaId: id }).then(res => {
      this.setState({
        cinemadata:res.data.cinema,
      })
    })
    getCinemaFilmsArrangement({ cinemaId: id }).then(res => {
      this.setState({
        filmdata: res.data.films,
        img:res.data.films[0].poster
      })
    })
  }

  handleBack = () => {
    this.props.history.goBack();
  }
  handleClose = () => {
    
  }
  handleChangeImg = (val) => {
    this.setState({
      activeFilm: val,
    })
  }
  render() {
    let { name, services, address } = this.state.cinemadata;
    let filmdata = this.state.filmdata;
    let { activeFilm } = this.state;
    console.log(activeFilm);
    return (
      <CinemaDetail>
        <div className='cinema-header' >
          <img src={require('@/assets/img/left.png')} alt="" style={{ width: '0.11rem', height: '0.18rem' }} onClick={this.handleBack} />
          <img src={require('@/assets/img/close.png')} alt="" style={{width:'0.19rem',height:'0.19rem',}} onClick={this.handleClose}/>
        </div>
        <div className='cinema-title'>
          <div style={{position:'absolute',top:'0',width:'100%',height:'0.44rem'}}> </div>
          {name}
        </div>
        <div className='cinema-warp'>
          <div className='cinema-info'>
            <div className='tags'>
              {
                services?services.map((v, i) => {
                  return <div className='tag' key={i}>
                    {
                      v.name
                    }
                  </div>
                }):<></>
              }
              <i className='icon'></i>
            </div>
            <div className='address'>
              <img src={require('@/assets/img/location.png')} alt="" style={{ width: '0.14rem', height: '0.21rem' }} />
              <div className='address-dec'>{ address }</div>
              <a href="tel:0571-86027055" className='phone'>
                <img src={require('@/assets/img/phone.png')} alt="" style={{ width: '0.17rem', height: '0.18rem' }}/>
              </a>
            </div>
          </div>
          <div className='schedule-warp'>
            <div className='film-bg'>
              <div className='img' style={{ backgroundImage: `url(${activeFilm?activeFilm.poster:''})` }}></div>
            </div>
            <div className='film-list'>
              <Swiper data={filmdata} handleChangeImg={ this.handleChangeImg}/>
              <div className='jianjian'><img src={require('@/assets/img/jianjian.png')} alt="" /></div>
            </div>
          </div>
          <div className='film-info'>
            <div className='film-head'>
              <span className='film-name'>{activeFilm ? activeFilm.name : ''}</span>
              <span className='film-grade'>{activeFilm ? activeFilm.grade : ''}</span>
              <span className='film-grade-title'>分</span>
              <img src="" alt="" />
            </div>
            <div className='film-desc'>
              {activeFilm?(activeFilm.category+' | '+activeFilm.runtime+'分钟 | '+activeFilm.director+'|'+activeFilm.actors.map(el=>(el.name+' ')).join('')):''}
            </div>
          </div>
          <div className='datelist'>
            <ul className='date-warp'>
              {
                activeFilm ? activeFilm.showDate.map((el, i) => {

                  return <Link to={'/cinema/'+ this.props.match.params.id +'/film/'+el} key={el}>
                    <li className='date-item' >
                    {new Date(el*1000).format(`${this.state.date[i]?this.state.date[i]:getWeekZh(new Date(el*1000).format('yyyy-MM-dd'))}M月d日`)}
                  </li>
                  </Link>
                }):<></>
                
              }
            </ul>
          </div>
          <div className='schedule-list'>
            <div>
              <Route path='/cinema/:id/film/:time' component={() => (<Film />)} />
              {
                console.log(this.props)
              }
              <Redirect from={'/cinema/'+ this.props.match.params.id} to={'/cinema/'+ this.props.match.params.id+'/film/'+`${activeFilm?activeFilm.showDate[0]:''}`}></Redirect>
            </div>
          </div>
        </div>
      </CinemaDetail>
    );
  }
}

export default Cinema;